{% extends 'layout/indexframe.html' %}

{% block title %}template{% endblock %}

{% block css %}
    <style>
        .img-circle {
            width: 80px;
            height: 80px;
            object-fit: cover;
        }

        .divvideo {
            background: #FFFFFF;
            width: 100%;
            height: 400px;
            overflow: hidden;
        }

        .div img {
            width: 100%;
        }

        .error-msg {
            color: red;
            position: absolute;
            font-size: 13px;
        }

        .showa {
            border: 1px solid #dddddd;
            padding: 20px 40px;
        }
    </style>
{% endblock %}

{% block content %}
    <div class="wrapper wrapper-content animated fadeInRight" style="height: 3000px;">
        <div class="row">
            <div class="panel-heading" style="font-size: 40px;text-align: center; background-color: #9ea6b9;">模板管理
            </div>
            <div class="col-lg-2" style="text-align: center;margin-top: 20px;"><a id="addtemp"
                                                                                  class="btn btn-primary btn-lg"
                                                                                  href="#">
                添加模板</a></div>
        </div>

        <div class="row">　</div>

        {% for obj in temp %}
            <div class="col-lg-4">
                <div class="ibox float-e-margins">
                    <div class="ibox-title" style="height: 70px;">
                    <span class="pull-right">
                        <a class="btn btn-primary btn-tempedit" editid='{{ obj.id }}'>编辑</a>
                        <a class="btn btn-danger" href="/web/temp/del/?nid={{ obj.id }}">删除</a>

                    </span>


                        <h1><strong>{{ obj.modelname }}</strong></h1>
                    </div>
                    <div class="ibox-content" style="height: 150px;">

                        <div class="row">
                            <div class="col-md-6">
                                <h3 class="no-margins"><h2><strong>详情:</strong></h2>{{ obj.detail }}</h3>
                                {#                            <div class="font-bold text-navy">44% <i class="fa fa-level-up"></i> <small>Rapid#}
                                {#                                pace</small></div>#}
                            </div>
                            <h3><strong>关联Topic:</strong></h3>
                            <div class="col-md-6" id="{{ obj.id }}ver">
                                Null
                            </div>
                        </div>
                    </div>
                    <div class="ibox-content" style="text-align: center; height: 80px;">
                        <div class="col-md-6"><a href="/web/device/model/?nid={{ obj.id }}"
                                                 class='btn btn-default  btn-lg'>点击由此进入模板</a>
                        </div>
                        <div class="col-md-6"><input mid="{{ obj.id }}" type="button"
                                                     class="btn btn-primary btn-lg relbtn"
                                                     value="关联设备"></div>
                    </div>
                </div>
            </div>

        {% endfor %}


        {#模板详情#}
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h1 class="modal-title" id="myModalLabel1" style="text-align: center;"><strong>添加模板</strong>
                        </h1>
                    </div>
                    <div class="modal-body">
                        <form id="formadd">
                            <div class="clearfix">
                                {% for field in form %}
                                    <div>
                                        <div class="form-group">
                                            <label><strong>{{ field.label }}</strong></label>
                                            {{ field }}
                                            <span class="error-msg">{{ field.errors.0 }}</span>
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <input id="formSub" type="button" class="btn btn-primary" value="保存模板">
                    </div>
                </div>
            </div>
        </div>


        {# 关联详情 #}
        <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                    </div>
                    <div style="text-align: center;"><h1 id="modeltitle">title</h1></div>
                    <div class="row">
                        <div class="col-md-6"><h1 class="modal-title" style="text-align: center;" id="myModalLabel">
                            未关联设备</h1></div>
                        <div class="col-md-6"><h1 class="modal-title" style="text-align: center;" id="myModalLabel">
                            已关联设备</h1></div>
                    </div>
                    <div class="modal-body">
                        <div class="clearfix">
                            <div class="col-md-6 showa" style="font-size: 30px;">

                                <div class="col-md-8" id="wgl">
                                    <div>Null</div>
                                </div>
                                <div class="col-md-4 testa" id="addwgl">
                                    <div>Null</div>
                                </div>


                            </div>
                            <div class="col-md-6 showa" style="font-size: 30px">

                                <div class="col-md-8" id="ygl">
                                    <div>Null</div>
                                </div>
                                <div class="col-md-4" id="delygl">
                                    <div>Null</div>
                                </div>

                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


{% endblock %}

{% block js %}
    <script>
        $(document).ready(function () {
            $('#devframe').addClass('active')
        });
    </script>>

    <script>
        $(document).ready(function () {
            $.ajax({
                url: "/web/temp/load/",
                type: "GET",
                success: function (res) {
                    if (res.status) {
                        $.each(res.dict_list, function (key, value) {
                            document.getElementById(key + "ver").innerHTML = value;
                        })
                    }
                }
            })

        });
    </script>


    <script>
        var tempeditid;
        $(function () {
            bindaddtemp();
            bindsavetemp();
            bindshowreltemp();
            bindaddreltemp();
            binddelreltemp();
            bindtempedit();
            bindclosemodal();
        })

        function bindaddtemp() {
            $('#addtemp').click(function () {
                tempeditid = undefined;

                $("#formadd")[0].reset();
                $("#myModalLabel1").text("添加模板")
                $('#myModal').modal('show');
                document.getElementById("id_mobile_phone").value ={{ request.tracer.mobile_phone }};
                document.getElementById("id_mobile_phone").readOnly = true;

            });
        }

        function binddelreltemp() {
            $("#delygl").on("click", ".btndell", function () {
                var topic = $(this).attr("topic");
                var modelname = $('#modeltitle').text();
                var mid = $('#modeltitle').attr('mid')
                $.ajax({
                    url: "/web/reldel/",
                    type: "GET",
                    data: {"topic": topic, "modelname": modelname},
                    dataType: "JSON",
                    success: function (res) {
                        if (res.status) {
                            $.ajax({
                                url: "/web/relshow/",
                                type: "GET",
                                data: {"mid": mid},
                                dataType: "JSON",
                                success: function (res) {
                                    if (res.status) {
                                        document.getElementById("modeltitle").innerHTML = res.modelname;
                                        document.getElementById("wgl").innerHTML = res.unfind;
                                        document.getElementById("ygl").innerHTML = res.find;
                                        document.getElementById("addwgl").innerHTML = res.unfindact;
                                        document.getElementById("delygl").innerHTML = res.findact;
                                    }
                                }
                            })
                        }
                    }
                })
            })
        }

        function bindaddreltemp() {
            $("#addwgl").on("click", ".btnaddd", function () {
                var topic = $(this).attr("topic");
                var modelname = $('#modeltitle').text();
                var mid = $('#modeltitle').attr('mid')
                $.ajax({
                    url: "/web/reladd/",
                    type: "GET",
                    data: {"topic": topic, "modelname": modelname},
                    dataType: "JSON",
                    success: function (res) {
                        if (res.status) {
                            $.ajax({
                                url: "/web/relshow/",
                                type: "GET",
                                data: {"mid": mid},
                                dataType: "JSON",
                                success: function (res) {
                                    if (res.status) {
                                        document.getElementById("modeltitle").innerHTML = res.modelname;
                                        document.getElementById("wgl").innerHTML = res.unfind;
                                        document.getElementById("ygl").innerHTML = res.find;
                                        document.getElementById("addwgl").innerHTML = res.unfindact;
                                        document.getElementById("delygl").innerHTML = res.findact;
                                    }
                                }
                            })
                        }
                    }
                })
            })
        }

        function bindshowreltemp() {
            $('.relbtn').click(function () {
                var mid = $(this).attr("mid");
                $.ajax({
                    url: "/web/relshow/",
                    type: "GET",
                    data: {"mid": mid},
                    dataType: "JSON",
                    success: function (res) {
                        if (res.status) {
                            document.getElementById("modeltitle").setAttribute('mid', mid);
                            document.getElementById("modeltitle").innerHTML = res.modelname;
                            document.getElementById("wgl").innerHTML = res.unfind;
                            document.getElementById("ygl").innerHTML = res.find;
                            document.getElementById("addwgl").innerHTML = res.unfindact;
                            document.getElementById("delygl").innerHTML = res.findact;
                        }
                    }
                })

                $('#myModal2').modal('show');
                {#document.getElementById("id_mobile_phone").value ={{ request.tracer.mobile_phone }};#}
                {#document.getElementById("id_mobile_phone").readOnly = true;#}
            });
        }

        function bindsavetemp() {
            $("#formSub").click(function () {
                $(".error-msg").empty();

                if (tempeditid) {
                    $.ajax({
                        url: "/web/temp/edit/?editid=" + tempeditid,
                        type: "POST",
                        data: $("#formadd").serialize(),
                        dataType: "JSON",
                        success: function (res) {
                            if (res.status) {
                                alert(res.success)
                                $("#formadd")[0].reset();
                                $('#myModal').modal('hide');
                                location.reload();
                            } else {
                                alert(res.error)
                            }
                        }
                    })
                } else {
                    $.ajax({
                        url: "/web/temp/add/",
                        type: "POST",
                        data: $("#formadd").serialize(),
                        dataType: "JSON",
                        success: function (res) {
                            if (res.status) {
                                $("#formadd")[0].reset();
                                $('#myModal').modal('hide');
                                location.reload();
                            } else {
                                $.each(res.error, function (name, error) {
                                    $("#id_" + name).next().text(error[0])
                                })
                            }
                        }
                    })

                }


            });
        }

        function bindtempedit() {
            $(".btn-tempedit").click(function () {
                    var editid = $(this).attr("editid")
                    tempeditid = editid
                    $("#myModalLabel1").text("编辑模板");
                    $.ajax({
                        url: "/web/editsearch/",
                        tyoe: "GET",
                        data: {"editid": editid},
                        dataType: "JSON",
                        success: function (res) {
                            if (res.status) {
                                $("#formadd")[0].reset();
                                document.getElementById("id_mobile_phone").value = res.data["mobile_phone_id"];
                                document.getElementById("id_mobile_phone").readOnly = true;
                                document.getElementById("id_modelname").value = res.data["modelname"];
                                document.getElementById("id_detail").value = res.data["detail"];
                            } else {
                                alert(res.error);
                            }

                        }
                    })
                    $("#myModal").modal("show");
                }
            )
        }

        function bindclosemodal() {
            $('#myModal2').on('hidden.bs.modal',
                function () {
                    location.reload();
                })
        }
    </script>



{% endblock %}